<template>
	<div class="content-ranking">
		<div v-if="show" class="content-ranking_top"><content-ranking-element :data="top_data" :is_tag="true" :overflow_count="overflow_count"></content-ranking-element></div>
		<ul class="content-ranking_other">
			<li v-for="(item, _index) in other_data" :key="_index"><content-ranking-element :data="item" :overflow_count="overflow_count"></content-ranking-element></li>
		</ul>
	</div>
</template>

<script>
import ContentRankingElement from './element';
export default {
	components: { ContentRankingElement },
	props: {
		// 数据
		data: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			show: false,
			top_data: {},
			overflow_count: this.$store.getters.system_overflowCount,
			other_data: []
		};
	},
	created() {
		this.initData();
	},
	methods: {
		initData() {
			if (this.data.length === 0) {
				this.show = false;
				return;
			}
			this.show = true;

			let cloneDeep = this.$cloneDeep(this.data);
			if (cloneDeep.findIndex(item => item.top) === -1) {
				// 不存在指定置顶数据
				this.top_data = cloneDeep.shift();
				this.other_data = cloneDeep;
				return;
			}
			// 存在指定置顶数据
			cloneDeep.forEach(item => {
				if (item.top && Object.keys(this.top_data).length === 0) {
					this.top_data = item;
				} else {
					this.other_data.push(item);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content-ranking {
	&_top {
	}
	&_other {
		li {
			margin-top: 10px;
			padding-top: 10px;
			border-top: 1px solid $default-border-color;
		}
	}
}
</style>
